import React, { useState } from 'react';
// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
import { Story, Meta } from '@storybook/react/types-6-0';

import { Input, InputProps } from './input';

export default {
  title: 'Example/input',
  component: Input,
  argTypes: {
    backgroundColor: { control: 'color' },
  },
} as Meta;
const Template: Story<InputProps> = (args) => {
  const [value, setValue] = useState();
  return <Input {...args} style={{ width: "300px", marginLeft: '2em' }}
    onChange={(e) => {
      // setValue(e.target.value)
    }}
  />;
}

export const Lg = Template.bind({});
Lg.args = {
  size: 'lg',
  placeholder: "placeholder"
};

export const Sm = Template.bind({});
Sm.args = {
  size: 'sm',
  placeholder: "placeholder"
};

export const Disabled = Template.bind({});
Disabled.args = {
  disabled: true,
  placeholder: 'disabled'
}

export const IconInput = Template.bind({});
IconInput.args = {
  placeholder: "input with icon",
  icon: "search"
}

export const prepandInput = Template.bind({});
prepandInput.args = {
  placeholder: "prepandInput",
  prepend: "https://"
}

export const appendInput = Template.bind({});
appendInput.args = {
  placeholder: "append",
  append: ".com"
}